// 费用报销单
<template>
  <div class="formWrapper">
    <el-card class="box-card marginbottom10px">
      <div slot="header" class="clearfix">
        <span>费用报销单——基本信息</span>
      </div>
      <div class="text item">
        <el-form :inline="true" label-position="right" label-width="8vw" :model="basicInfo">
          <el-form-item label="报销人：">
            <el-input clearable size="medium" v-model="basicInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="部门：">
            <el-autocomplete
              class="inline-input"
              v-model="basicInfo.sector"
              :fetch-suggestions="querySearch"
              size="medium"
              clearable
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="受益项目：">
            <el-input clearable size="medium" v-model.number="basicInfo.benefitProject"></el-input>
          </el-form-item>
          <el-form-item label="分摊比例：">
            <el-input clearable size="medium" v-model="basicInfo.apportionmentRatio"></el-input>
          </el-form-item>
          <el-form-item label="项目名称：">
            <el-input clearable size="medium" v-model="basicInfo.projectName"></el-input>
          </el-form-item>
          <el-form-item label="是否有预算：">
            <el-radio-group v-model="basicInfo.isBudget" size="medium">
              <el-radio-button label="true" >是</el-radio-button>
              <el-radio-button label="false">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>费用报销单——费用明细</span>
      </div>
      <div class="text item">
        <table class="formTable">
          <tr>
            <td class="shortTd">序号</td>
            <td class="longTd">费用名称</td>
            <td class="shortTd">单据张数</td>
            <td class="midTd">发生金额</td>
            <td class="longTd">费用说明</td>
          </tr>
          <tr v-for="(item,index) of travelDetail" :key="index">
            <td>{{index+1}}</td>
            <td>
              <el-input
                class="bordernone"
                size="medium"
                v-model="item.name"
              >
              </el-input>
            </td>
            <td>
              <el-input
                maxlength="6"
                class="bordernone"
                size="medium"
                v-model.number="item.formCount"
              >
              </el-input>
            </td>
            <td>
              <el-input
                maxlength="9"
                class="bordernone"
                size="medium"
                v-model="item.amount"
              >
              </el-input>
            </td>
            <td>
              <el-input
                class="bordernone"
                size="medium"
                v-model="item.costsStatement"
              >
              </el-input>
            </td>
          </tr>
          <tr>
            <td>合计</td>
            <td>/</td>
            <td>{{formCountTotal}}</td>
            <td>{{amountTotal}}</td>
            <td>/</td>
          </tr>
        </table>
      </div>
    </el-card>
    <div class="btnBox">
      <el-popover
        placement="top-start"
        trigger="hover"
        content="保存至草稿箱">
        <el-button round slot="reference">保存</el-button>
      </el-popover>
      <el-button round @click="handleSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ExpenseReimbursementForm',
  data () {
    return {
      basicInfo: {
        name: '',
        sector: '',
        benefitProject: '',
        apportionmentRatio: '',
        projectName: '',
        isBudget: ''
      },
      sectorSuggestions: [],
      tableData: [],
      travelDetail: [
        {
          'name': '',
          'formCount': '',
          'amount': '',
          'costsStatement': ''
        }, {
          'name': '',
          'formCount': '',
          'amount': '',
          'costsStatement': ''
        }, {
          'name': '',
          'formCount': '',
          'amount': '',
          'costsStatement': ''
        }, {
          'name': '',
          'formCount': '',
          'amount': '',
          'costsStatement': ''
        }
      ]
    }
  },
  methods: {
    querySearch (queryString, cb) {
      let sectorSuggestions = this.sectorSuggestions
      let results = queryString ? sectorSuggestions.filter(this.createFilter(queryString)) : sectorSuggestions
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    loadAll () {
      return [
        {'value': '策略网联部', 'address': '123'},
        {'value': '营销部', 'address': '123'},
        {'value': '生产车间', 'address': '123'}
      ]
    },
    handleSubmit () {
      console.log(this.basicInfo)
      console.log(this.travelDetail)
    }
  },
  mounted () {
    this.sectorSuggestions = this.loadAll()
  },
  computed: {
    formCountTotal () {
      let formCountTotal = null
      for (let i = 0; i < this.travelDetail.length; i++) {
        formCountTotal += Number(this.travelDetail[i].formCount)
      }
      return formCountTotal
    },
    amountTotal () {
      let amountTotal = null
      for (let i = 0; i < this.travelDetail.length; i++) {
        amountTotal += Number(this.travelDetail[i].amount)
      }
      // 保留小数点后两位且避免出现2.3+2.9=5.1999999的情况
      amountTotal = (Math.round(amountTotal * 100)) / 100
      if (isNaN(amountTotal)) {
        amountTotal = '请输入数字！'
      }
      return amountTotal
    },
    deductTab () {
      return this.$store.state.deductTab
    }
  },
  watch: {
    // 关闭标签时清空该页的数据
    deductTab (val) {
      if (val === 'ExpenseReimbursementForm') {
        for (let key in this.basicInfo) {
          this.basicInfo[key] = ''
        }
        for (let i = 0; i < this.travelDetail.length; i++) {
          for (let key in this.travelDetail[i]) {
            this.travelDetail[i][key] = ''
          }
        }
      }
    }
  }
}
</script>

<style scoped>
  .text>div{
    margin-bottom: 5px;
  }
  .marginright10px{
    margin-right:10px;
  }
  .marginbottom10px{
    margin-bottom: 10px;
  }
  .formTable{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
  }
  table,table tr th, table tr td {
    border:1px solid #ccc;
    text-align: center;
    line-height: 200%;
  }
  .bordernone{
    width: 100%;
  }
  .bordernone >>> .el-input__inner{
    border:none;
    text-align: center;
  }
  .btnBox{
    margin-top: 10px;
    text-align: right;
  }
  .formWrapper >>> .el-form-item{
    margin-bottom: 10px;
  }
  .formWrapper >>> .el-card__body{
    padding: 5px;
  }
  .formWrapper >>> .el-card__header{
    padding: 8px 20px;
  }
  .shortTd{
    width: 1%;
  }
  .midTd{
    width: 2%;
  }
  .longTd{
    width: 7%;
  }
</style>
